.page-detail{

    .case__info{
        width: rem(720);
        padding: rem(24);
        background-color: #fff;
        border-radius: 2px;
        margin: 0 auto rem(16);
        overflow: hidden;

        &-title{
            padding-left: rem(12);
            height: 18px;
            font-size: 18px;
            color: #141414;
            letter-spacing: 0;
            line-height: 1;
            border-left: rem(8) solid #0090ff;
            font-weight: 400;
            @include text-line(1);
        }

        &__container{
            padding: rem(12) 0;
        }

        &__item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: rem(32);
            font-size: 12px;
            color: #888;
            letter-spacing: 0;
            line-height: 12px;
        }

        &-status{
            padding: rem(4) rem(8);
            border-radius: 2px;
            &.z-notStart{
                background-color: #d1d1d1;
                color: #666;
            }
            &.z-ing{
                background-color: #bbe1ff;
                color: #0090FF;
            }
            &.z-end{
                background-color: #f0f0f0;
                color: #cacaca;
            }
        }

        &-label{
            color: #454545;
        }
    }

    .case__explain{
        width: rem(720);
        padding: rem(24);
        background-color: #fff;
        border-radius: 2px;
        margin: 0 auto rem(16);
        overflow: hidden;
        &-title{
            padding-left: rem(8);
            height: 14px;
            font-size: 14px;
            color: #141414;
            letter-spacing: 0;
            line-height: 1;
            border-left: rem(4) solid #0090ff;
            font-weight: 400;
            @include text-line(1);
        }
        &__item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: rem(32);
            font-size: 12px;
            color: #888;
            letter-spacing: 0;
            line-height: 12px;
            &.align-items-start{
                align-items: flex-start;
                line-height: 16px;
            }
        }
        &-label{
            color: #454545;
            white-space: nowrap;
            &.f-group{
                margin-left: rem(12);
            }
        }
    }

    .case__detail{
        width: rem(720);
        padding: rem(24);
        background-color: #fff;
        border-radius: 2px;
        margin: 0 auto rem(16);
        overflow: hidden;
        &-title{
            padding-left: rem(8);
            height: 14px;
            font-size: 14px;
            color: #141414;
            letter-spacing: 0;
            line-height: 1;
            border-left: rem(4) solid #0090ff;
            font-weight: 400;
            @include text-line(1);
        }

        &__tableContainer {
            width: 100%;
            padding-bottom: rem(32);
            overflow-x: auto;

            &::-webkit-scrollbar {
                height: rem(20);
                border-radius: rem(20);
                background-color: #f3f3f3;
            }

            &::-webkit-scrollbar-track {
                border-radius: rem(20);
                background-color: #f3f3f3;
            }
            &::-webkit-scrollbar-thumb {
                width: rem(100);
                border-radius: 10px;
                background-color: #cecece;
            }
        }
        &__table{
            width: 100%;
            margin-top: rem(42);
            border-right: 1px solid #e1e5e9;
            border-bottom: 1px solid #e1e5e9;
            tbody{
                width: 100%;
            }
            th,td{
                white-space: nowrap;
                text-align: left;
                border-left: 1px solid #e1e5e9;
                border-top: 1px solid #e1e5e9;
                color: #454545;
                padding: rem(20) rem(24);
            }
            th{
                color: #141414;
                background-color: #f0f3f6;
                width: rem(150);
            }
            .btn-look{
                font-size: 12px;
                color: #0090ff;
                letter-spacing: 0;
                line-height: 1;
                border: 1px solid #0090ff;
                border-radius: 2px;
                padding: rem(6) rem(16);
            }

        }
    }

    .btn-goRoom{
        width: rem(720);
        display: block;
        margin: rem(16) auto;
        line-height: rem(88);
        font-size: 14px;
        background-color: #0090ff;
        color: #fff;
        text-align: center;
        border: none;
        border-radius: 2px;
    }

    .bidRecord{
        position: relative;
        &-close{
            color: #acacac;
            font-size: 14px;
            position: absolute;
            top: 12px;
            right: 12px;
        }
        &-header{
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: rem(60);
        }
        &-title{
            height:12px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color: #0090FF;
            line-height:12px;
        }
        &-body{
            padding: 0 rem(36) rem(36);
        }
        &-name{
            height:14px;
            line-height:14px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            color: #6d6d6d;
            margin: rem(52) 0 rem(46);
            @include text-line(1);
            span{
                + span{
                    margin-left: rem(16);
                }
            }
        }
        &__container{
            max-height: 320px;
            overflow-y: auto;
            table{
                width: 100%;
                border-bottom: 1px solid #e1e5e9;
            }
            thead,tbody,tr{
                width: 100%;
            }
            th,td{
                white-space: nowrap;
                text-align: left;
                border-top: 1px solid #e1e5e9;
                color: #454545;
                padding: rem(20) rem(40);
                font-size: 12px;
                +th{
                    border-left: 1px solid #e1e5e9;
                }
                +td{
                    border-left: 1px solid #e1e5e9;
                }
            }
            th{
                color: #141414;
            }
            td{
                color: #454545;
            }
        }
    }

    .no__gid{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #888;
        padding: 20px;
        i{
            font-size:26px;
        }
        &-text{
            font-size: 14px;
            margin-left: 12px;
        }
    }
}



